<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 5000px;
        }
        .fixed{
            position: fixed;
            right: 10px;
            top: 0;
        }
    </style>
</head>

<body>
    <button class="open">打开窗口</button>
    <button class="close">关闭窗口</button>
    <button class="moveBy">moveBy</button>
    <button class="moveTo">moveTo</button>
    <div class="fixed">
        <button class="scrollBy">scrollBy</button>
        <button class="scrollTo">scrollTo</button>
    </div>
</body>
<script>
    /* 
        window下的内置属性
            name  窗口的名称(字符串类型) => 一经设置,只要窗口不关闭,会一致存在
            status 设置窗口状态栏的文本(默认"") => 页面刷新之后就会重置
            innerWidth   窗口的可视宽高(文档的可视宽度 + 滚动条宽度,不包含控制台)
            innerHeight  窗口的可视宽高(文档的可视高度 + 滚动条高度,不包含控制台) 


        window下的内置方法
            open(url,name,窗口特征)   打开新的窗口或查找一个已命名的窗口
            (1)  open(url)  打开新的窗口
            (2)  open(url,name)  打开新的窗口,并设置窗口名称 =>  每次打开窗口前,查找是否存在对应name属性的窗口,有就跳转,没有就打开新的
            (2)  open(url,name,窗口特征)
                 窗口特征 => "width=600px,height=400px,left=100px,top=100px"

            返回值: 新窗口的window对象

            close()  对应window关闭窗口


            操作小窗口
            moveBy() 可相对窗口的当前坐标把它移动指定的像素。 
            moveTo() 把窗口的左上角移动到一个指定的坐标。 
            resizeBy() 按照指定的像素调整窗口的大小。 
            resizeTo() 把窗口的大小调整到指定的宽度和高度。

            注意: 建议使用服务器环境 => 用live server打开

            // 操作小窗口/当前窗口
            scrollBy() 按照指定的像素值来滚动内容。 
            scrollTo() 把内容滚动到指定的坐标

            document.documentElement.scrollLeft
            document.documentElement.scrollTop

    
    */


    var openBtn = document.querySelector(".open");
    var closeBtn = document.querySelector(".close");
    var moveByBtn = document.querySelector(".moveBy");
    var moveToBtn = document.querySelector(".moveTo");
    var scrollByBtn = document.querySelector(".scrollBy");
    var scrollToBtn = document.querySelector(".scrollTo");

    var subWindow = null;

    openBtn.onclick = function () {
        // window.open("https://www.baidu.com"); // 打开新的窗口
        // window.open("https://www.baidu.com","baidu"); // 打开新的窗口或查找一个已命名的窗口
        // window.open("https://www.baidu.com", "baidu", "width=600px,height=400px,left=100px,top=100px");

        subWindow = window.open("../../day21/html/15 swiper演示.html", "baidu", "width=600px,height=400px,left=400px,top=100px");
        console.log(subWindow);
    }
    closeBtn.onclick = function () {
        // window.close();  // window => 当前窗口

        if(subWindow){
            subWindow.close();
        }
    }

    moveByBtn.onclick = function(){
        // subWindow.moveBy(100,100);
        subWindow.moveBy(-100,-100);
    }

    moveToBtn.onclick = function(){
        subWindow.moveTo(1000,400);
    }


    scrollByBtn.onclick = function(){
        window.scrollBy(0,100);
    }

    scrollToBtn.onclick = function(){
        window.scrollTo(0,1000);
    }


</script>

</html>